<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>样式演示</title>
    <!--
            head里面的style里面写的都是css
            css : 以什么颜色显示,以什么位置显示
            css跟Java程序员无关的
     -->

    <style>
        div {
            /*给div标签添加边框*/
            border: 1px solid red;



        }
        /*  左侧图框的div样式*/
        .c1{
            float: left;
            width: 15%;
            height: 200px;

        }

        /*  中间图框的div样式*/
        .c2{
            float: left;
            width: 59%;
            height: 200px;

        }

        /*  右侧图框的div样式*/
        .c3{
            float: left;
            width: 15%;
            height: 200px;
        }

        /*底部超链接的div样式*/
        .footer{
            /*清除浮动效果*/
            clear: both;
            /*文本对齐方式*/
            text-align: center;
            /*背景颜色*/
            background: blue;
        }


    </style>
</head>
<body>
<!--
    body里面写的都是HTML
    HTML : 显示什么内容,显示什么图片,显示什么数据
    HTML是和我们Java程序员相关的

-->

<!--顶部登录注册-->
<div>top</div>

<!--导航条-->
<div>navibar</div>

<!--左侧图框-->
<div class="c1">left</div>
<!--中间图框-->
<div class="c2">center</div>
<!--右侧图框-->
<div class="c3">right</div>

<!--底部页脚超链接-->
<div class="footer">footer</div>

</body>


</html>